<template>
    <nav class="sub-nav-wrapper">
        <div class="sub-nav">
            <ul>
                <li v-for="(item, index) in subNavs ">
                    <router-link class="f-tdn" :to="{path:item.route}" :class="currentRoute == item.route ? 'active' : ''" @click="changStyle(item.route)">
                        <em>{{ item.name }}</em>
                    </router-link>
                </li>
            </ul>
        </div>
    </nav>
</template>
<script setup>
import subNavs from "../json_data/sub_nav.json"
import { useRoute, useRouter } from "vue-router";
import { ref , onMounted} from "vue";
const route = useRoute();
const router = useRouter();
let currentRoute = ref('');
router.isReady().then(()=>{
     currentRoute.value = route.path;

})

const changStyle = (routeParam) => {
    currentRoute.value = routeParam;
}




</script>

<style lang="scss">
.sub-nav-wrapper{
    background-color: #C20C0C;
    border-bottom: 1px solid #a40011;
        .sub-nav{
        width: 1000px;
        height: 34px;
        margin: 0 auto;
        
       
        padding-left: 253px;
        ul{
            display: flex;
            li{
                a{
                    color: #fff;
                    em{
                        margin: 7px 17px 0;
                        padding: 0 13px;
                        border-radius: 20px;
                        display: block;
                        height: 20px;
                        // text-align: center;
                    }

                    &:hover{
                        em{
                            background-color: #980909;
                        }
                    }

                    &.active{
                      em{
                        background-color: #980909;
                      }
                    }
                }
            }
        }
    }
}

</style>